// 先加载地图
import AMapLoader from "@amap/amap-jsapi-loader";

export  function getMap(plugins){
   return  AMapLoader.load({
        key: "e7d1008ab05917c20eaccde9906f590b", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins, // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })

}
//创造标记点
export function createIcon(AMap,item){
  return new AMap.Marker({
        position: new AMap.LngLat(item.lngLat[0], item.lngLat[1]),
        icon: gaugePoint(AMap,item),
        offset: new AMap.Pixel(-13, -30)
    });


}
// 设置新的图标
export function gaugePoint(AMap,item){
    var image;
    //   0 公司
    //   1 工地
    //   2 车
    //   3 储料罐
    switch (item.type) {
        case 0:
            image = require('../assets/img/house.png');
            break;
        case 1:
            image = require('../assets/img/cs_default.png');
            break
        case 2:

            image = item.alarm===1? require('../assets/img/车-红.png'):require('../assets/img/car_default.png')
            break
        case 3:
            image = require('../assets/img/storage_default.png');
            break
        default:
    }
    return new AMap.Icon({

        // 图标尺寸
        size: new AMap.Size(30, 30),
        // 图标的取图地址
        image,
        // 图标所用图片大小
        imageSize: new AMap.Size(30,30),
    });
}

// 创建新的信息窗体
export function createInfoWindow(AMap,item,marker,map){
   return  new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content:infoContent(AMap,item,marker,map),
        offset: new AMap.Pixel(16, -45)
    });
}
//定义函数的全部内容
 function infoContent(AMap,item,marker,map){
    console.log(item)
    var info = document.createElement("div");
    //可以通过下面的方式修改自定义窗的宽高
    info.style.width = "400px";
    // 定义顶部标题
    var top = document.createElement("div");
    var titleD = document.createElement("div");
    var closeX = document.createElement("img");
    top.className = "info-top";
    titleD.innerHTML = `<div class="infoHead"><span class="card">${item.name}</span>`;
    closeX.src = "https://webapi.amap.com/images/close2.gif";
    closeX.onclick = () => {

        map.clearInfoWindow()
    };

    top.appendChild(titleD);
    top.appendChild(closeX);
    info.appendChild(top);

    // 定义中部内容
    var middle = document.createElement("div");
    middle.className = "info-middle";
    middle.style.backgroundColor = 'white';
    middle.innerHTML = middleCounter(item,map);
    info.appendChild(middle);
    if (item.id===3||item.id===4){
        var btn=document.createElement('button')
        btn.className='btn'
        btn.innerText='轨迹回放'
        middle.appendChild(btn)
        btn.onclick= ()=>{
           trackPlayback(AMap,item,marker,map)
        }

    }

    // 定义底部内容
    var bottom = document.createElement("div");
    bottom.className = "info-bottom";
    bottom.style.position = 'relative';
    bottom.style.top = '0px';
    bottom.style.margin = '0 auto';

    var sharp = document.createElement("img");
    sharp.src = "https://webapi.amap.com/images/sharp.png";

    bottom.appendChild(sharp);
    info.appendChild(bottom);
    return info;
}
// 定义窗体的中部内容
export function middleCounter(item,map){
    console.log(item,map)
    let content = []
    switch (item.id){
        case 1:content.push(`<div class="infoMain"><table class="type"><tr><td class="name">经度:</td><td class="num">${item.lngLat[0]}</td><td class="name">纬度:</td><td class="num">${item.lngLat[1]}</td></tr><tr><td class="name">门禁状态:</td><td class="num">${item.access}</td><td class="name">生产状态:</td><td class="num">${item.status}</td></tr><tr><td class="name">PM10:</td><td class="num">未绑定</td></tr></table></div>`);break;
        case 2:content.push(`<div class="infoMain"><table class="type"><tr><td class="name">经度:</td><td class="num">${item.lngLat[0]}</td><td class="name">纬度:</td><td class="num">${item.lngLat[1]}</td></tr></table></div>`);break;
        case 3:content.push(`<div class="infoMain"><table class="type"><tr><td class="name">经度:</td><td class="num">${item.lngLat[0]}</td><td class="name">纬度:</td><td class="num">${item.lngLat[1]}</td></tr><tr><td class="name">车速:</td><td class="num">${item.speed}</td><td class="name">发送时间:</td><td class="num">2023-05-10</td></tr><tr><td class="name">所属企业:</td><td class="num">第一公司</td><td class="name">待报警处理个数:</td><td class="num">${item.alarm}</td></tr><tr><td class="name">待报警处理类型:</td><td class="num"></td></tr></table></div>`);break;
        case 4:content.push(`<div class="infoMain"><table class="type"><tr><td class="name">经度:</td><td class="num">${item.lngLat[0]}</td><td class="name">纬度:</td><td class="num">${item.lngLat[1]}</td></tr><tr><td class="name">车速:</td><td class="num">${item.speed}</td><td class="name">发送时间:</td><td class="num">2023-05-10</td></tr><tr><td class="name">所属企业:</td><td class="num">第一公司</td><td class="name">待报警处理个数:</td><td class="num">${item.alarm}</td></tr><tr><td class="name">待报警处理类型:</td><td class="num"></td></tr></table></div> `);break;
        case 5:content.push(`<div class="infoMain"><table class="type"><tr><td class="name">经度:</td><td class="num">${item.lngLat[0]}</td><td class="name">纬度:</td><td class="num">${item.lngLat[1]}</td></tr><tr><td class="name">所属企业:</td><td class="num">未知</td><td class="name">所属工地:</td><td class="num">未知</td></tr><tr><td class="name">发送时间:</td><td class="num">未知</td><td class="name">储料罐重量:</td><td class="num">${item.weight}</td></tr><tr><td class="name">容量:</td><td class="num">未知（吨）</td><td class="name">百分比:</td><td class="num">未知</td></tr><tr><td class="name">待报警处理个数:</td><td class="num">${item.alarm}</td></tr><tr><td class="name">待报警处理类型:</td><td class="num"></td></tr></table></div> `);break;
    }
    return content
}
//运动轨迹的方法
function trackPlayback(AMap,item,marker,map){
    console.log()
    new AMap.Polyline({
        map,
        path: item.lineArr,
        showDir: true,
        strokeColor: "#28F",  //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6,      //线宽
        // strokeStyle: "solid"  //线样式
    });

    var passedPolyline = new AMap.Polyline({
        map,
        strokeColor: "#AF5",  //线颜色
        strokeWeight: 6,      //线宽
    });
    marker.on('moving', (e) => {
        passedPolyline.setPath(e.passedPath);
        map.setCenter(e.target.getPosition(), true)
    });
    marker.moveAlong(item.lineArr, {
        // 每一段的时长
        speed: 2000,
        // duration: 500,//可根据实际采集时间间隔设置
        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
    });
    map.setFitView();

}